<template>
  <div class="home">
    <van-nav-bar class="headtop">
      <template #title>
        <span style="color: #fff;">众鑫金融联盟</span>
      </template>
      <template #right>
        <van-icon color="#fff" class="m-r-5" name="share-o" size="25" />
        <van-icon color="#fff" name="chat-o" size="25" />
      </template>
    </van-nav-bar>
    <van-grid :border="false" column-num="5" class="m-t-6">
      <van-grid-item>
        <template>
          <van-image
            class="m-b-1"
            width="2rem"
            height="2rem"
            :src="require('./img/p1.png')"
          />
          <span class="typeF">商业拓展</span>
        </template>
      </van-grid-item>
      <van-grid-item>
        <template>
          <van-image
            class="m-b-1"
            width="2rem"
            height="2rem"
            :src="require('./img/p1.png')"
          />
          <span class="typeF">商业拓展</span>
        </template>
      </van-grid-item>
      <van-grid-item>
        <template>
          <van-image
            class="m-b-1"
            width="2rem"
            height="2rem"
            :src="require('./img/p1.png')"
          />
          <span class="typeF">商业拓展</span>
        </template>
      </van-grid-item>
      <van-grid-item>
        <template>
          <van-image
            class="m-b-1"
            width="2rem"
            height="2rem"
            :src="require('./img/p1.png')"
          />
          <span class="typeF">商业拓展</span>
        </template>
      </van-grid-item>
      <van-grid-item>
        <template>
          <van-image
            class="m-b-1"
            width="2rem"
            height="2rem"
            :src="require('./img/p1.png')"
          />
          <span class="typeF">商业拓展</span>
        </template>
      </van-grid-item>
    </van-grid>
    <van-row class="tips p-t-1 p-b-1 m-t-1 m-b-1">
      <van-col span="24">
        <span class="m-r-3">
          小新头条提示
          <van-icon name="bullhorn-o" />
        </span>
        重要，众鑫联盟营销规范
      </van-col>
    </van-row>
    <van-nav-bar :border="false" right-text="更多>>">
      <template #left>
        <span class="byyj">本月业绩</span>
      </template>
    </van-nav-bar>
    <div class="byjy p-t-3 p-b-3 m-b-2">
      <p class="jye">交易额(元)</p>
      <p class="count">2580.55</p>
      <p class="sy">本月收益0元</p>
      <div class="syd">
        <p>
          0
          <br />
          新增盟友
        </p>
        <p>
          0
          <br />
          激活用户
        </p>
      </div>
    </div>
    <div class="banner p-t-3">
      <li>网贷口子</li>
      <li>信用卡</li>
    </div>
    <van-nav-bar class="m-t-2" :border="false" right-text="更多">
      <template #left>
        <span class="byyj">最新金融资讯</span>
      </template>
    </van-nav-bar>
    <div class="news">
      <div class="p-l-4">
        <img src="./img/news1.png" alt="" />
      </div>
      <div class="xl">
        <p>新系列2.0</p>
        <p>暑假包一上线，马上清凉一夏</p>
      </div>
      <div class="p-r-2">
        <span class="ljcj">立即参加</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {}
</script>

<style lang="scss" scoped>
.home {
  background: #eee;
}
.headtop {
  background: linear-gradient(
    to top right,
    rgb(83, 150, 177),
    rgb(111, 111, 233)
  );
  width: 100%;
  position: fixed;
  top: 0;
}
.van-ellipsis {
  color: #fff;
}
.typeF {
  font-size: 12.8px;
}
.tips {
  background: #fff;
  font-size: 13px;
  padding-left: 10px;
  span {
    color: #089afe;
  }
}
.byyj {
  font-weight: 700;
}
.byjy {
  color: #fff;
  //   width: 95%;
  margin: 0 auto;
  margin-bottom: 10px;
  background: #fff;
  background-image: url('./img/bejg.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  text-align: center;
  padding-top: 1;
  .jye {
    font-size: 13px;
    margin-top: 10px;
  }
  .count {
    font-size: 28px;
    font-weight: 700;
  }
  .sy {
    padding: 2px 10px;
    border-radius: 20px;
    border: solid 1px #fff;
    background: #ffffff3b;
    width: 101px;
    margin: 0 auto;
    font-size: 13px;
  }
  .syd {
    display: flex;
    justify-content: space-between;
    p {
      width: 50%;
      font-size: 13px;
      margin-top: 2rem;
    }
    p:first-child {
      border-right: 1px solid #fff;
    }
  }
}
.banner {
  list-style: none;
  display: flex;
  justify-content: space-around;
  background: #fff;
  li {
    background: url('./img/wd1.png') no-repeat left center;
    padding: 10px 0 10px 40px;
    &:first-child {
      padding-right: 50px;
      border-right: 1px solid #eee;
    }
  }
}
.news {
  display: flex;
  justify-content: space-between;
  background: #fff;
  align-items: center;
  font-size: 13px;
  .xl {
    margin-left: -3rem;
  }
  .ljcj {
    width: 4.8rem;
    height: 1.2rem;
    color: #0d93f2;
    background: #ebebeb;
    padding: 3px 10px;
    border-radius: 20px;
  }
}
</style>
